<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-07-26 12:16:21
 * @LastEditTime: 2023-08-08 16:28:57
-->
<script lang="ts" setup name="NewsTemplateConfig">
import { useNews } from './useNews'

const SystemChannel = defineAsyncComponent(() => import('./components/SystemChannel.vue'))
const WxChannel = defineAsyncComponent(() => import('./components/WxChannel.vue'))
const DdChannel = defineAsyncComponent(() => import('./components/DdChannel.vue'))
const SmsChannel = defineAsyncComponent(() => import('./components/SmsChannel.vue'))

const route = useRoute()
const router = useRouter()
const InComponent: Ref<any> = ref(null)

const { ESendType, newsStore } = useNews()
const channelData: Ref<any> = ref({})
const getComponentName = () => {
  const type = route.query.type
  channelData.value = {
    ...newsStore.msgContentForm,
    templateId: newsStore.msgContentForm?.templateId || newsStore.msgContentForm?.$row?.id
  }

  switch (type) {
    case ESendType.系统消息:
      InComponent.value = SystemChannel
      break
    case ESendType.微信小程序:
      InComponent.value = WxChannel
      break
    case ESendType.短信:
      InComponent.value = SmsChannel
      break
    case ESendType.钉钉群机器人:
      InComponent.value = DdChannel
      break
  }
}
getComponentName()

const channelParent: Ref<any> = computed(() => {
  return {
    ...newsStore.msgContentForm
  }
})

const handleBack = () => {
  router.back()
}
</script>

<template>
  <IkPageMain fixed class="pl-[15px] pr-[15px]">
    <IkPageHeader title="编辑" padding="0" @click="handleBack" />
    <div class="channel-content">
      <el-form v-if="channelParent?.$row" label-width="100px" label-position="top">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="模块" prop="businessName">
              <el-input v-model.trim="channelParent.$row.businessName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编号" prop="businessKey">
              <el-input v-model.trim="channelParent.$row.businessKey" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="标题" prop="messageTemplateTitle">
          <el-input v-model.trim="channelParent.$row.messageTemplateTitle" disabled />
        </el-form-item>
      </el-form>
      <component :is="InComponent" :data="channelData" :is-edit="true" />
    </div>
  </IkPageMain>
</template>

<style lang="scss" scoped>
.channel-content {
  height: calc(100% - 132px);
  overflow-y: auto;
}
</style>
